<template>
    <div class="comp-set-nickname">
        <modal :show="true">
            <validator :rules="rules" :parent="_self">
                <form class="m-form-dialog" name="form" action="javascript:;">
                    <div class="modal-header">
                        <a href="javascript:;" class="close" @click="hide"><span>×</span></a>
                        <span class="modal-title">{{$t('common.comp.setNickName.title')}}</span>
                    </div>
                    <div class="modal-body">
                        <div class="col-row">
                            <div class="col-input">
                                <input type="text"
                                       class="fn-block"
                                       :placeholder="$t('common.comp.setNickName.placeholder')"
                                       autocomplete="off"
                                       id="nickName"
                                       name="nickName"
                                       v-model="form.nickName">
                                <div class="ui-tip"></div>
                            </div>
                            <div class="btn-group">
                                <button type="submit"
                                        class="ui-btn"
                                        v-if="isRequesting === false"
                                        @click="submit()">{{$t('common.yes')}}</button>
                                <button type="submit"
                                        class="ui-btn"
                                        disabled
                                        v-if="isRequesting === true">{{$t('common.waiting')}}...</button>
                            </div>
                        </div>
                        <div class="col-row fn-gray">
                            *{{$t('common.comp.setNickName.tip')}}
                        </div>
                    </div>
                    <div class="modal-footer"></div>
                </form>
            </validator>
        </modal>
    </div>
</template>

<script type="text/babel">

    import Vue from "vue";
    import Modal from "../../grsc-base/component/Modal.vue";
    import Validator from '../../grsc-base/component/Validator/main';
    import commonService from '../common/commonService';
    import filter from '../../grsc-base/util/filter';
    import lib from '../../src/common/lib'
    import cookie from '../../grsc-base/util/cookie';
    import {REG_PHONE} from '../../grsc-base/common/constants';

    export  default Vue.extend({
        data(){
            return {
                form: {
                    nickName:''
                },
                rules: {
                    nickName: {
                        required: true,
                        requiredTip: this.$t('common.comp.setNickName.requireTip'),
                        maxlength: 20,
                        maxlengthTip: this.$t('common.comp.setNickName.maxTip'),
                        pattern: /^\s*\S+.*$/,
                        patternTip: this.$t('common.comp.setNickName.pattenTip')
                    }
                },
                isRequesting: false
            }
        },
        props: {
            onHide: {
                type: Function,
                default(){
                }
            },
            onSuccess: {
                type: Function,
                default(){
                }
            }
        },
        computed: {},
        components: {
            'modal': Modal,
            Validator
        },
        created() {

        },
        methods: {

            submit(){
                if (this.rules.$checkAll() === false) {
                    return;
                }
                let param = {
                    nickName: this.form.nickName.trim()
                };

                this.isRequesting = true;
                commonService.setNickName(param).done(rep=> {
                    if (rep.code === window.CODE.SUCCESS) {
                        this.onSuccess(this.form.nickName);
                        this.$emit('success', this.form.nickName);
                        this.hide();
                        window.success(this.$t('common.success'));
                    }else{
                        window.error(rep.msg);
                    }
                }).always(() => {
                    this.isRequesting = false;
                })
            },

            hide(){
                this.$emit('hide');
            }
        }
    })
</script>

<style lang="sass" rel="stylesheet/scss">
    .comp-set-nickname{
        .ui-btn{
            width: 100px;
        }
    }
</style>